require("../less/courselist.less")

//页面加载完毕
document.ready(() => {
        let userId = JSON.parse(window.localStorage.getItem("users")).userId;
        console.log("333",userId);
        
        //顶部
        window.$utils.showTopName("courselist");
        //底部
        window.$utils.showTabbar("run");
        //获取dom
        let newCourseDom = document.querySelector("#newCourse")//新课程
        let oldCourseDom = document.querySelector("#oldCourse")//旧课程
        //页面加载时，发送请求去获取当前用户的训练课程列表
        //调用
        getCourseList();
        //封装
        function getCourseList() {
                axios.get(window.$utils.BASE_URL + "/sports/allcourse?id=" + userId)
                
                        .then((res) => {
                                let result = res.data;
                                
                                console.log("222",res.data);
                                if (result.status === 0) {
                                        //获取训练课程数组
                                        let arr = result.data;
                                        //找新课程
                                        let newCourse = arr.find(function (v) {
                                                return v.latest === 1
                                        })
                                        //找旧课程
                                        let oldCourseArr = arr.filter(function (v) {
                                                return v.latest === 0
                                        })
                                        // console.log("旧课程",oldCourseArr);
                                        //渲染的新课程
                                        showNewCourse(newCourse);
                                        showOldCourse(oldCourseArr)
                                }

                        })
                        .catch((err) => {
                                console.log(err);
                        })
        }
    /* 渲染新课程 */
    function showNewCourse(newCourse) {
        // console.log("渲染新课程");
        // console.log("新课程", newCourse);
        if (newCourse) {


            let str = `
                <a href="courseDetails.html?courseid=${newCourse.courseId}">
                <div class="curriculum h300">
                    <p class="curriculumImg">
                        <img src="${window.$utils.BASE_URL + newCourse.imgurl}" alt="">
                    </p>
                    <div class="curriculumCon h50">
                        <div>${newCourse.name}</div>
                        <p>${newCourse.desc}</p>
                    </div>
                </div>
            </a>        
        `
            newCourseDom.innerHTML = str;
        }
    }
    /* 渲染旧课程 */
    function showOldCourse(oldCourseArr) {
        let str = "";
        oldCourseArr.forEach(function (v) {
            str += `
                <a  class="course-link mt10" href="courseDetails.html?courseid=${v.courseId}">
                    <div class="courseCon">
                        <img src="${window.$utils.BASE_URL + v.imgurl}" alt="">
                        <div class="courseConText">
                            <p class="courseConDise">${v.name}</p>
                            <p class="">${v.desc}</p>
                        </div>
                    </div>
                </a>
             
             `
        })
        // console.log(str);
        oldCourseDom.innerHTML = str;
    }
})







